<template>
  <div class="main">
    <div class="left">
      <component-tree :tree-data.sync="treeListData" @treeDetail="getDateilTree" />
    </div>
    <div class="right">
      <directory :team-detail.sync="treeDetail" />
    </div>
  </div>
</template>

<script>
import ComponentTree from '@/components/tree'
import { directoryTreeList } from '@/api/directory'
import Directory from './components/directory'

export default {
  name: 'Information',
  components: {
    ComponentTree,
    Directory
  },
  data() {
    return {
      treeListData: [],
      treeDetail: {}
    }
  },
  computed: {
    undataObject: {
      get: function() {
        return this.treeDetail
      }
    }
  },
  watch: {

  },
  beforeMount() {
    this.treeList()
  },
  mounted() {
  },
  methods: {
    async treeList() {
      const res = await directoryTreeList()
      if (res.code === 200) {
        this.treeListData = res.data || []
        if (this.treeListData.length > 0) {
          this.$nextTick(function() {
            this.getDateilTree(this.treeListData[0])
          })
        }
      }
    },
    getDateilTree(data) {
      this.treeDetail = data
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../styles/variables';
.main{
  margin: 24px 20px 0 20px;
  padding-top: 1px;
  .left{
    width: 200px;
    float: left;
    background: rgba(37,38,47,1);
    padding: 0 12px 0 12px;
  }
  .right{
        margin: 0 0 0 210px;
  }
}
</style>

